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Less is More: 

Improve the success of undergraduate 
students learning graphics programming... 

...by replacing a 30-week 3D graphics 
programming sequence with a 15-week 2D 
course, followed by a 15-week 3D course. 
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Topics 

1. About our program 

2 . Challenges w/ trad, graphics courses 

3. Curriculum changes 

4. 2D graphics course/topics 

5. Results (expected and unexpected) 

6. Q/A 
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Goal: Undergraduate Graphics 
Programming Education 

A solid foundations in fundamentals... 
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My Teaching Philosophy 


GDCONF.COM 


self-driven, project-based learning 
with a hint of competition 
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Graphics Programming Challenge 

• Solid C++ skills 

. Data Structures, File 10, Use of APIs 

• Good 3D Math Skills 

• Matrix and Vector Math 

• Significant Programmer Confidence 

• When something goes wrong (scale, orientation, etc) 

• Ready for paradigm shift (GPU programming) 

• Huge amount of "base knowledge" 
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Traditional 3D Graphics Education 


• Missing "Game Topics" 

. ui 

• Fonts & Localization 

• Menus, Transitions, & Safe-frames 

• Polish 

• Giving Control to Designers 


Computer Graphics 
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Traditional 3D Graphics Education 

• Time wasted on "traditional" CS topics 

• Spend time programmatically generating shapes 
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Traditional 


3D Graphics Education 


• particle systems 

• fonts 

• tools integration 



• Missing the "Value of Artist" 

• 3D models formats (not .OBJ) 

• Artists write their own shaders 

• Every system needs an editor 

• terrain 


<COLLADA xmlns="http : //www. collada . org/2005/ 11/COLLADASchema [*?" version="l .4.1 
<asset> 

<contributor> 

<author>gcorson</author> 

<authoring_tool>Maya 8.0 | ColladaMaya v3.02 | FCollada v3.2</ author ing_t 
<comments>Collada Maya Export Options: ba!ceTransfornis=0;exportPolygonMes£ 
curveConstrainSampling=0 ; exportCanieraAsLoolcat=0 ; 
exportLights=l ; expor tCamer as=l ; export JointsAndS kin=l ; 
exportAnimations=l ; exportTr iangles=0 ; exportInvisibleNodes=0 ; 
exportNormals=l ; exportTexCoords=l ; exportVertexColors=l ; exportTar.gents=0 ; 
exportTexTangents=0;exportConstraints=l;exportPhysics=0;exportXRefs=l; 
deref erenceXRef s=0; cameraXFov=0; cameraYFov=l</conments> 

<source_data> 

file:///C:/Documents%20and%20Settings/gcorson/Desktop/Physics%20Tests/New_Proj 

</source_data> 

</ contributor 

<created>2007-04-04T23 : 08 : 51Z</created> 

<modif ied>2007-04-04T23 : 08 : 51Z</modified> 
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Summary: 

Can't be offered until 3 rd year. 

Even then, the average student is 
overwhelmed ... then disillusioned. 


No space for additional course. 
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Graphics I 


Graphics Programming in 2D? 
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Language and API? 

C# | XNA 


Any language w/ any graphics library. 
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Graphics I (2D) - Game Topics 

• Artist 

• Loading assets from file in specific formats (sprites) from a 

sprite editor * XML - Collada prep 

• Creating an editor for particles 

• Loading tiled level heightmap prep 

• Polish 

• UI, Fonts, Transitions 
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Graphics I (2D) - 3D prep 

• Introduction to the API (XNA, DirectX, OpenGL) 

• Color, alpha-blending functions 

• Display Buffer and double buffering 

• Tracking depth and draw-order (intro to depth buffer) 

• Image-file formats, image compression 

• Filtering - magnification/minification techniques 

• Review of Vector Math (addition, normals, dot products) 

• Camera location, Scaling Matrix 

• Optional: Rotation and Translation in 2D with Matrices 
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Graphics I (2D) - 3D prep 

• Triggering Animation Cycles 

• Building and performance of a particle system 

• Curves - Interpolation, Splines 

• Vector Graphics - Intro to rasterization (GPU) 

• Pixel-perfect Collision Detection - Spacial Partitioning 
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Graphics I (2D) - 3D prep 

• GPU programming via pixel/fragment shader 

• Applications: 

• blur techniques 

• anti-aliasing 

• bloom effect 

• upscaling interpolation (linear, nearest neighbor, etc) 

• Topics: 

• attributes (passing data from CPU to GPU) 

• accumulation buffers and masking 

• texture sampling 

• performance monitoring 
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Project-based Learning 

• Various Projects 

• Minor (1 week) 

• sprite animation, importers, level editors, etc 

• Major (2-4 weeks) 

• Particle System 

• Pixel Shader 
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Major Projects 

• Particle System 

• multiple effects 

• include an editor 

• deploy to low-end hardware 

• competitive elements: 

• performance 

• visuals 

• interaction 
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Major Projects 


Pixel Shader 

• multiple effects 

• deploy to low-end hardware 

• competitive elements: 

• visuals 

• research element 
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Outcomes? 



GDC EDUCATION SUMMIT 


GAME DEVELOPERS CONFERENCE 2014 MARCH 17-21, 2014 GDCONF.COM 


Outcomes 

• Improved average student performance 

• Improved quality of 3D applications 

• Higher level of polish 

• Better understanding of "tech demos" 

• We now have the numbers required to 
offer an "advanced graphics" course 
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Outcomes 

• Opportunities for success for others 

• tools development & integration 

• low-end API work 
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Outcomes 

• Improved Retention 

• students see relevancy sooner 

performance -> 

data structures -> 

computer architecture 
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Unexpected Outcomes 

• Game Architecture 

• not distracted by graphics programming 
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Unexpected Outcomes 

• Game Design Students 
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Employment Outcomes 

With new curriculum: ( 2011 graduated in 2013 ) 

100% Employment including: 

Graphics Software Engineer WB/Turbine 
Rendering Software Engineer Apple Inc 
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Resources 


Graphics I (2D) 


Graphics II (3D) 
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Further 2D 


Graphics Resources 


2D Graphics Programming for Games *»*"».> 



Videos 

Below you will find videos from the samples programs that can be created using the code supplied In the book, 2D Graphics Programming for Gomes, 
la addition, you will find video dips from various games and films that the text references. 

Clips are sorted by chapter and section. 

Chapter 1 - Introduction 



1.1.2 - Runaway 2D Hits - Peggie 


Chapter 2 - Basics of Computer Graphics 


1.1.2- Runaway 2D Hits - Angry Birds 




■u i n n Tim 
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2D Graphics Programming for Games : Forum 



GPU and Shaders 

How can I compile for Pixel Shader model 3.0? 

Where can I find available functions when writing shat 
Is it possible to test pixel shader code in real time? 


How do I get C * 4 0 or C* 5.0 commands to run on the Xbox? 

How do I install XNA Game Studio 4.0 on Windows 8 

How do I create a ccgame file in Visual Studio 2012 or 2013? 

I co>mr*nt Starred by Vaik^otin October 201 ] XNA 

How do I use XNA on iOS, Anroid, Mac, Linux, or the Playstation 
Suite? 

What do I need to get started with XNA? 


L Particle Effect sfl 
L CPU and Shaders0 


cXNAO 
L OpenCLQ 


How can I import PNG spritesheets in OpenGL? 


s there a framework for 2D games using C++ and DirectX 1 


Where can I find 2D art for my game? 


2D Graphics Progra 


Source Code 

https://github.com/alaskajohn/2dGPfG 

Or, download latest zip here. 

Current Status as of July 2013: 

C# / XNA Complete 

C++ / OpenGL Started 

C++ / DirectX 1 1 Not Started 

Flash Not Started 

Additional APIs and Languages will be added regularly to the GitHub repo. If there is specific 
material you're looking for, please use the poll on ourfacebook page and I'll prioritize based on 
the results. 

If you have specific questions, please post them in the 2D Graphics Programming for Games 
forum. 

Share this: ©BOD © 


GitHub 



* Syllabus 








2D Graphics Programming 

for Games 

_ AK Peters | CRC PRESS 

Questions? 


John Pile Jr 

2dGraphicsProgramming.com 

Twitter: @JohnPile 
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